<template>
  <div style="min-height: 100vh; background-color: #f5f5f5">
    <div class="box">
      <!-- 顶部 -->

      <div class="topbox align">
        <i @click="back" class="iconfont icon-zuojiantou"></i>
        <span>{{ introduction.name }}</span>
      </div>

      <!-- 封面和简介 -->
      <div class="topcover">
        <div style="text-align: center;">
          <div class="picUrl">
            <img :src="introduction.picUrl" alt="">

          </div>

        </div>

        <!-- <div class="flexcenter">
          <svg
            t="1677933965686"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="1476"
            width="20"
            height="20"
          >
            <path
              d="M928 832l-64 32-352 160-352-160-64-32a96 96 0 0 1-96-96V96a96 96 0 0 1 96-96l64 32 352 160 352-160 64-32a96 96 0 0 1 96 96v640a96 96 0 0 1-96 96z m-480 0V288L128 192v544l320 128v-32zM896 192L576 288v576l320-128V192z"
              fill="#b550ff"
              p-id="1477"
            ></path>
          </svg>
          <span></span>
        </div> -->
      </div>
      <!--      
      <div class="flex sp">
        
          <div>
            <p>   {{introduction.browse > 1000 ? introduction.browse/1000+"k" : introduction.browse }}
            </p>
            <p > FllOWERS</p>
          </div>
          <div>
            <p>   {{introduction.evaluateNum > 1000 ? introduction.evaluateNum/1000+"k" : introduction.evaluateNum ? introduction.evaluateNum:13+"k" }}</p>
            <p> evaluate</p>
          </div>
          <div>
            <p> {{introduction.partSum}}</p>
            <p> List</p>
          </div>
          

      </div> -->

      <div class="barnaer">
        <p style="font-size: 0.5rem; margin-left: 0.5rem; margin-top: 0.5rem">
          {{ introduction.name }}
        </p>
        <p style="
                                                                                                                        font-size: 0.5rem;
                                                                                                                        margin-left: 0.5rem;
                                                                                                                        margin-top: 0.5rem;
                                                                                                                        color: #9f9a9d;
                                                                                                                      ">

        </p>
        <link rel="stylesheet" href="//at.alicdn.com/t/c/font_2721176_52vicsx0e85.css" />
        <div class="icon-icon">
          <div class="iconfont icon-icon_shuben">16+</div>
        </div>
        <div class="icon-icona">
          <div class="iconfont icon-icon_shuben">No.{{ introduction.id }}</div>
        </div>
        <div class="sive">
          <div class="sivea"> {{ introduction.browse > 1000 ? introduction.browse / 1000 + "k" : introduction.browse }}
            <br>
            <span>FOLLOWRS</span>
          </div>
          <div class="sivea">{{ introduction.evaluateNum > 1000 ? introduction.evaluateNum / 1000 + "k" :
            introduction.evaluateNum ? introduction.evaluateNum : 13 + "k" }}<br> <span>READS</span> </div>
          <div class="sivea iconfont icon-icon_shuben">{{ introduction.partSum }} <br> <span>VOTES ></span> </div>



        </div>
      </div>

      <!-- <van-divider >briefIntroduction</van-divider> -->
      <p class="introduce font2" :class="{ moreadd: more }">
        <!-- 简介 -->
        {{ introduction.brief }}
      </p>
      <!-- <van-divider @click="moreadd" content-position="right"
        >more<i class="icon-xiala iconfont"></i
      ></van-divider> -->
    </div>
    <div class="reader">
      <!-- 小说内容 -->
      <van-skeleton v-if="!novel" title :row="6" />

      <div class="content" v-html="novel"></div>
    </div>
    <div class="read align">
      <!-- 跳转 -->

      <router-link v-if="!get2[$route.query.id]" :to="{ name: 'reader', params: $route.query }">
        <div class="getInto">enterReading</div>
      </router-link>
      <router-link v-else :to="{
        name: 'reader',
        params: {
          id: $route.query.id,
          sort: get2[$route.query.id],
        },
      }">
        <!-- #664df6 -->
        <div class="getInto">Continue</div>
      </router-link>

      <!-- <router-link :to="{
        name: 'reader',
        params: { id: $route.query.id, sort: $route.query.sort - 0 + 1 },
      }">
        <div style="background-color: #000" class="getInto">N E X T</div>
      </router-link> -->
    </div>
  </div>
</template>

<script>
import { getnovelinfo, getpart } from "@/api/reader";
import { mapGetters } from "vuex";

export default {
  name: "novel",
  data() {
    return {
      more: false,
      paiere: { id: 0, sort: 0, 2: 3 },
      introduction: { data: {} },
      novel: "",
    };
  },
  methods: {
    back() {
      this.$router.go(-1);
    },
    moreadd() {
      this.more = !this.more;
    },
  },
  computed: {
    get1() {
      return 123;
    },
    get2() {
      console.log("历史", this.$route.params.id);
      var sort = this.$store.getters.gethistory;
      if (sort) {
        return sort;
      } else {
        return 0;
      }
      return sort;
    },
    // ...mapGetters('gethistory')
  },
  async created() {
    // 发送两个请求

    console.log(this.$store.getters.gethistory);
    console.log("?对象", this.$route.query);
    let result = await Promise.all([
      getnovelinfo({
        page: 1,
        size: 1,
        where: { id: this.$route.query.id },
      }),
      getpart(this.$route.query),
    ]);
    console.log(result);
    this.introduction = result[0].data.list[0];
    result[1].articleContent = result[1].articleContent.replace(
      /(.*\r)/g,
      (n) => {
        if (n.trim()) {
          return "<p>" + n + "</p>";
        } else {
          return "";
        }
      }
    );
    this.novel = result[1].articleContent;
  },
};
</script>

<style lang="scss" scoped>
.topcover {
  padding: 0.5rem 0;
}

.barnaer {
  width: 11rem;
  // height: 6rem;
  border-radius: 0.2rem;
  margin: 0.3rem auto;
  background-color: white;
  padding: 0.5rem 0;

  .icon-icon {
    width: 2.2rem;
    height: 0.8rem;
    margin: 0.3rem;
    background-color: #f3f3f3;

    .icon-icon_shuben {
      line-height: 0.8rem;
      text-align: center;
      color: rgb(126, 189, 240);
    }
  }

  .icon-icona {
    width: 2.8rem;
    height: 0.8rem;
    margin: 0.3rem;
    background-color: #efeff1;

    .iconfont {
      line-height: 0.8rem;
      text-align: center;
    }
  }

  .sive {
    width: 100%;
    height: 1.7rem;
    display: flex;
    justify-content: space-around;
    align-items: center;
  }

  .sivea {
    font-size: 0.7rem;
    text-align: center;
    font-weight: 700;

    span {
      font-size: 0.2rem;
      color: #b4b5b9;
    }
  }
}

.van-image {
  box-shadow: 0rem 0.2rem 0rem 0rem #000;
}

.flex {
  // opacity: 0.5;
  background-color: #b4b5b9;
}

.icon {
  font-size: 0.8rem;
}

.flex {
  display: flex;
}

.sp {
  justify-content: space-between;
  padding: 0 1rem;
  text-align: center;

  p {
    font-size: 0.68rem;
  }

  div p:nth-child(1) {
    font-weight: 600;
  }

  div p:nth-child(2) {
    font-size: 0.5rem;
    color: #cbd0d2;
  }
}

.align {
  display: flex;
  align-items: center;
}

.font2 {
  font-size: 0.5rem;
  color: black;
}

// 顶部
.topbox {
  // background-color: #ffff;
  height: 1.5rem;
  padding: 0 0.3rem;

  span {
    font-size: 0.5rem;
    margin-left: 0.3rem;
  }
}

//  封面和简介
.fmbox {
  padding: 0.6rem 0;
}

.logo {
  margin: 0 20rem;
}

.icon-zuojiantou {
  font-size: 1rem;
}

.brief {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;

  span {
    display: block;
  }

  .icon-mianfei1 {
    color: #ff1111;
  }

  .complete {
    padding: 0.05rem;
    height: 0.4rem;
    margin: 0 0.2rem;
    border-radius: 0.08rem;
    color: #f7f7f6;
    background-color: #de6800;
    font-size: 0.1rem;
  }
}

.flexcenter {
  display: flex;
  align-items: center;
  // transform: scale(1.5);
  // font-size: 1rem;
  color: #b550ff;
  position: relative;
  // margin-left: 1rem;
}

.flexcenter span {
  // position: absolute;
  // top: 0;left: 0;
  font-size: 0.7rem;
}

.brief div:nth-child(1) {
  font-size: 0.7rem;
  font-weight: 600;
}

.introduce {
  text-indent: 1rem;
  line-height: 1rem;
  padding: 0 0.5rem;
  max-height: 4rem;
  overflow: hidden;
  transition: 1s;
}

.moreadd {
  max-height: 8rem;
}

// .logo{
//    height: 3rem;
//    width: 3rem;
// }
.reader {
  word-break: break-all;
  text-indent: 1em;
  border-radius: 0.2rem;

  background-color: #ffff;
  padding: 1rem 0.5rem;
  // min-height: 5rem;
  font-size: 0.6rem;
  width: 11rem;
  margin: 0 auto;
  box-sizing: border-box;
  overflow: hidden;
  padding-bottom: 2rem;
}

::v-deep .content p:nth-child(1) {
  font-size: 0.7rem;
  font-weight: 800;
  text-indent: 0;
  margin-bottom: 0.5rem;
}

// 底部按钮
.read {
  width: 100vw;
  position: fixed;
  bottom: 0;
  height: 2rem;
  font-size: 0.6rem;
  justify-content: space-evenly;

  .getInto {
    width: 9rem;
    font-family: 幼圆;
    // font-weight: 900;
    background-color: #ebb1b1;
    background-color: #000;
    padding: 0.4rem;
    text-align: center;
    border-radius: 0.7rem;
    color: #fff;
  }
}

.read div:nth-child(1) {
  background-color: #664df6;
  // background-color: #e5353e;
  color: #fff;
}

.picUrl {
  display: inline-block;

  height: 5.6rem;
  overflow: hidden;
  background-color: #000;
  overflow: hidden;
  border-radius: 0.5rem;
  box-shadow: 0rem 0.65rem 0.7rem -0.4rem rgb(37, 37, 37);

  img {
    width: inherit;
    height: inherit;
  }
}
</style>